<template>
    <div  class="center">
        <el-container class="contain-borrow">
            <el-card class="card">
                <el-container>
                    <img v-if="this.borrowInfo.borrowId === 7" src="@/assets/imgs/4000002.png" style="height: 300px; width: 200px;margin-top: 80px;"/>
                    <img v-else-if="this.borrowInfo.borrowId === 8" src="@/assets/imgs/4000004.png" style="height: 300px; width: 200px;margin-top: 80px;"/>
                    <img v-else-if="this.borrowInfo.borrowId === 9" src="@/assets/imgs/4000005.png" style="height: 300px; width: 200px;margin-top: 80px;"/>
                    <img v-else-if="this.borrowInfo.borrowId === 10" src="@/assets/imgs/4000012.png" style="height: 300px; width: 200px;margin-top: 80px;"/>
                    <img v-else src="@/assets/imgs/common.png" style="height: 300px; width: 200px;margin-top: 80px;"/>
                <div class="aside" style="text-align: center;">
                        <el-descriptions title="借阅详情" direction="vertical" :column="4"  border :label-align="center" >
                            <el-descriptions-item label="图书编号" :span="2">{{ borrowInfo.borrowId }}</el-descriptions-item>
                            <el-descriptions-item label="书名" :span="2">{{borrowInfo.bookName}}</el-descriptions-item>
                            <el-descriptions-item label="借阅人" :span="4">{{ borrowInfo.username }}</el-descriptions-item>
                            <el-descriptions-item label="借阅日期" :span="2">{{ borrowInfo.startDate }} </el-descriptions-item>
                            <el-descriptions-item label="结束日期" :span="2">{{ borrowInfo.endDate }}</el-descriptions-item>
                            <el-descriptions-item label="是否还书" :span="2">{{ borrowInfo.returnBook === 1 ? '已还书' : '未还书' }}</el-descriptions-item>
                            <el-descriptions-item label="是否拿书" :span="2">{{ borrowInfo.getBook === 1 ? '已拿书' : '未拿书' }}</el-descriptions-item>
                            <el-descriptions-item label="评价" :span="4">
                                {{ 
                                    borrowInfo.evaluation === 1 ? '图书损坏严重' : 
                                    borrowInfo.evaluation === 2 ? '图书丢失' : 
                                    borrowInfo.evaluation === 3 ? '图书正常归还' : 
                                    borrowInfo.evaluation === -1 ? '图书尚未归还' : ''
                                }}
                            </el-descriptions-item>
                        </el-descriptions>
                    
                </div>
            <el-container>
                <el-main>
                    <div class="Qrcode">
                        <img :src="qrCodeData" alt="QR Code">
                        <div class="tipMsg">
                        尊敬的用户，您好！请凭此二维码到飞跃图书吧管理处拿书或还书。<br>
                        请注意！拿书二维码时效仅为两天，请尽快取书。
                        </div>
                        <el-button @click="back=>{this.$router.back()}" type="primary">返回</el-button>
                    </div>
                </el-main>
                </el-container>
            </el-container>
            </el-card>
        </el-container>
    </div>
</template>

<script>
import QRCode from 'qrcode';
import axios, { AxiosError } from 'axios'

export default {
    name:   'BorrowInfo',
    data(){
        return{
            borrowInfo:{},
            qrCodeData: '',
            username: localStorage.getItem('username'),
            bookId:this.$route.query.bookId
        }
    },
    methods: {
        async generateQRCode() {
            try {
                const qrData = this.borrowInfo.code;
                console.log(this.borrowInfo.code)
                const qrDataURL = await QRCode.toDataURL(qrData);
                this.qrCodeData = qrDataURL;
            } catch (error) {
                console.error('Error generating QR Code:', error);
            }
        },
        //使用结构赋值进行异常处理
        promise_error_process(promise){
            return promise.then(data=>[null,data])
                            .catch(err=>[err,null])
        },
        async getBookInfoByAjax(){
          const response = await axios({
            url				: `http://127.0.0.1:8080/api/borrow/returnBook/${this.username}/${this.bookId}`,
            method			: 'GET',
            withCredentials : true
          })
          return response
        },
        async getBookInfo(){
        const [err,result] = await this.promise_error_process(this.getBookInfoByAjax())
        if(err){
          console.log('请求异常')
        }
        else{
          console.log(result)
          this.borrowInfo = result.data.data
          console.log(this.borrowInfo.code)
          this.generateQRCode();
        }
      }
    },
    created(){
        this.getBookInfo()
    }
}
</script>

<style scoped>
.contain-borrow{
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 70px; /* 设置距离顶部的上边距为92px */
    top: 0;
    width: 90%;
    position: fixed;
    left: 200px;
    z-index: 10;
    height: 700px;
}
.el-main img {
    width: 50%; /* 将宽度设置为原来的1/2 */
    height: auto; /* 根据宽度自动调整高度 */
}
.aside{
    width: 60%;
    align-items: center;
    text-align: center;

}
.el-main{
    width: 50%
}
.message{
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: Arial, sans-serif;
    font-size: 14px;
    width: 100%;
}
.el-descriptions {
  text-align: center; /* 让文字内容居中 */
  display: flex;
  flex-direction: column; /* 垂直布局 */
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
}
.el-descriptions__body{
    width: 100%;
}
.el-descriptions__body .el-descriptions__table .el-descriptions__cell{
  text-align: center;
}
.el-descriptions__body .el-descriptions__table.is-bordered .el-descriptions__cell{
  text-align: center;
}
.Qrcode{
    margin-top: 88px;
    margin-bottom: 10px;

}
.tipMsg{
    width: 100%;
    text-align: left;
    margin-bottom: 20px;
}
.card{
    width: 70%;
    align-items: center;
    text-align: center;
}
</style>